<template>
  <div id="stationMap" style="overflow: auto;padding: 0;">
    <!-- 仓储 2018/1/24 11:59 zhangQ -->
    <Row style="background: #13293b">
      <i-col :span="24">
        <!-- 场站地图 -->
        <div id="allmap" class="stationMap" :style="{height: layoutHeight+33+'px'}" @mousewheel="onmousewheelFunction"></div>
        <!-- 地图标题 -->
        <div class="mapTitle">
          <h1>联运e达运营监测地图</h1>
          <h4>X-LINK monitoring indexes MAP</h4>
        </div>
        <!-- 左侧弹出详情框 -->
        <div class="infoDetail" v-if="modelShow.infoDetailShowAll">
          <Row>
            <i-col style="text-align: right;">
              <Icon type="close-round" style="cursor:pointer;" size="20" color="#69A3C6" @click.native="modelShow.infoDetailShowAll=false"></Icon>
            </i-col>
          </Row>
          <Row style="padding: 0 20px;" class="detailTitle">
            <i-col style="padding:10px 0;border-bottom:1px solid rgba(142,233,255,0.30);">
              <span style="font-size: 20px;" :style="stationColor">{{currentRow.stationName}}</span>
              <span style="font-size: 12px;color: #457387;margin-left: 5px;">「 {{currentRow.dataStation.free}} 」</span>
            </i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="12">自营/合资</i-col>
            <i-col span="12">{{currentRow.basicInfoSelfSupport===1?'自营':'合资'}}</i-col>
          </Row>
          <Row class="infoDetailRowBackfround">
            <i-col span="12">主要品类</i-col>
            <i-col span="12">
              <span v-if="!currentRow.stationInfoCategories">{{currentRow.transBizType}}</span>
              <template v-if="currentRow.stationInfoCategories.length>0" v-for="(item,i) in currentRow.stationInfoCategories">{{item.stationCategory.name}}、</template>
            </i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="12">货场数量</i-col>
            <i-col span="12">{{currentRow.basicInfoStationCount}} 个</i-col>
          </Row>
          <Row class="infoDetailRowBackfround">
            <i-col span="12">货场面积</i-col>
            <i-col span="12">{{currentRow.basicInfostationArea}}</i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="12">进出门数量</i-col>
            <i-col span="12">{{currentRow.basicInfoInOutCount}}</i-col>
          </Row>
          <Row class="infoDetailRowBackfround">
            <i-col span="12">专用线</i-col>
            <i-col span="12">{{currentRow.exclusiveLine}}</i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="12">场站类别</i-col>
            <i-col span="12">{{stationRankRoul[currentRow.stationRank].name}}「 {{stationRankRoul[currentRow.stationRank].qj}} 」</i-col>
          </Row>
          <Row class="infoDetailRowBackfround">
            <i-col span="12">大宗整车运输业务量</i-col>
            <i-col span="12">{{currentRow.transBizZcNyl}}「 年运量：{{currentRow.transBizZcZb}} 」</i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="12">集装箱运输业务量</i-col>
            <i-col span="12">{{currentRow.transBizJzxNyl}}「 年运量：{{currentRow.transBizJzxZb}}」</i-col>
          </Row>
          <Row class="infoDetailRowBackfround">
            <i-col span="12">发站与到站货物量占比</i-col>
            <i-col span="12">发站：{{currentRow.keyPointZbFz}} &nbsp;&nbsp;&nbsp;&nbsp; 到站：{{currentRow.keyPointZbDz}}</i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="12">大宗煤炭运输业务的发站名</i-col>
            <i-col span="12">发站：{{currentRow.keyPointDzmtFz}}
            </i-col>
          </Row>
          <Row class="infoDetailRowBackfround">
            <i-col span="12">大宗煤炭运输业务的到站名</i-col>
            <i-col span="12">到站：{{currentRow.keyPointDzmtDz}}
            </i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="12">门禁系统</i-col>
            <i-col span="12">
              <Icon type="checkmark-round" size="14" color="#A1BF50" v-if="+currentRow.basicInfoGuard===1?true:false"></Icon>
              <Icon type="close-round" size="14" color="#C41228" v-if="+currentRow.basicInfoGuard!==1?true:false"></Icon>
            </i-col>
          </Row>
          <Row class="infoDetailRowBackfround">
            <i-col span="12">能办理货运业务</i-col>
            <i-col span="12">
              <Icon type="checkmark-round" size="14" color="#A1BF50" v-if="+currentRow.keyPointFreightBiz===1?true:false"></Icon>
              <Icon type="close-round" size="14" color="#C41228" v-if="+currentRow.keyPointFreightBiz!==1?true:false"></Icon>
            </i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="12">有接取送达业务</i-col>
            <i-col span="12">
              <Icon type="checkmark-round" size="14" color="#A1BF50" v-if="+currentRow.keyPointFreightJqsd===1?true:false"></Icon>
              <Icon type="close-round" size="14" color="#C41228" v-if="+currentRow.keyPointFreightJqsd!==1?true:false"></Icon>
            </i-col>
          </Row>
          <Row class="infoDetailRowBackfround">
            <i-col span="12">有站内掏箱</i-col>
            <i-col span="12">
              <Icon type="checkmark-round" size="14" color="#A1BF50" v-if="+currentRow.keyPointZntx===1?true:false"></Icon>
              <Icon type="close-round" size="14" color="#C41228" v-if="+currentRow.keyPointZntx!==1?true:false"></Icon>
            </i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="12">有协议车队</i-col>
            <i-col span="12">
              <Icon type="checkmark-round" size="14" color="#A1BF50" v-if="+currentRow.keyPointProtocolFleet===1?true:false"></Icon>
              <Icon type="close-round" size="14" color="#C41228" v-if="+currentRow.keyPointProtocolFleet!==1?true:false"></Icon>
            </i-col>
          </Row>
          <Row class="infoDetailRowBackfround">
            <i-col span="12">有空箱回流需求</i-col>
            <i-col span="12">
              <Icon type="checkmark-round" size="14" color="#A1BF50" v-if="+currentRow.keyPointKxhl===1?true:false"></Icon>
              <Icon type="close-round" size="14" color="#C41228" v-if="+currentRow.keyPointKxhl!==1?true:false"></Icon>
            </i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="12">有站内箱源管理需求</i-col>
            <i-col span="12">
              <Icon type="checkmark-round" size="14" color="#A1BF50" v-if="+currentRow.keyPointZnxygl===1?true:false"></Icon>
              <Icon type="close-round" size="14" color="#C41228" v-if="+currentRow.keyPointZnxygl!==1?true:false"></Icon>
            </i-col>
          </Row>
          <Row class="infoDetailRowBackfround">
            <i-col span="12">姓名</i-col>
            <i-col span="12">
              {{currentRow.stationPersonName}}
            </i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="12">联系方式</i-col>
            <i-col span="12">
              {{currentRow.stationPersonTel}}
            </i-col>
          </Row>
          <Row class="infoDetailRowBackfround">
            <i-col span="12">职位</i-col>
            <i-col span="12">
              {{currentRow.stationPersonDuty}}
            </i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="12">摸底结论</i-col>
            <i-col span="12">
              {{currentRow.evaluate}}
            </i-col>
          </Row>
          <Row class="infoDetailRowBackfround">
            <i-col span="12">协议车队数量</i-col>
            <i-col span="12">
              {{currentRow.keyPointProtocolFleetCount?currentRow.keyPointProtocolFleetCount:0}} &nbsp;个
            </i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="12">自有车队数量</i-col>
            <i-col span="12">
              {{currentRow.keyPointOwnFleetCount?currentRow.keyPointOwnFleetCount:0}} &nbsp;
            </i-col>
          </Row>
        </div>
        <!-- 搜索按钮 -->
        <div v-if="previewModeShow===0" class="searchInputGroup">
          <div class="searchInput">
            <autoSelect2 placeholder="请输入场站名称" v-model="dispatchSearchFormStation.stationName" field="stationName" label="stationName" search-keys="stationName" :dataList="stationList" :dropAll="false" :width="'270px'" :top="'47px'"
                         :left="'-5px'"></autoSelect2>
          </div>
          <div class="searchIcon" style="cursor:pointer;" @click="selectStation(dispatchSearchFormStation)">
            <Icon type="ios-search" size="24" color="#44C0FF"></Icon>
          </div>
        </div>
        <!-- 右侧筛选 -->
        <div v-if="previewModeShow===0" class="screenGroup">
          <div class="screenBar">
            <Row style="height: 45px;width: 100%;line-height: 45px;">
              <i-col span="10" class="screenBarItem" @click.native="modelShowAction('screenGroupStation')">
                {{dispatchSearchForm.free===''?'全疆货运中心':dispatchSearchForm.free}}&nbsp;&nbsp;
                <Icon type="arrow-down-b"></Icon>
              </i-col>
              <i-col span="5" class="screenBarItem" @click.native="modelShowAction('screenGroupProduct')">
                {{dispatchSearchForm.typeId===''?'品类':categoryList[+dispatchSearchForm.typeId-1].name}}&nbsp;&nbsp;
                <Icon type="arrow-down-b"></Icon>
              </i-col>
              <i-col span="5" class="screenBarItem" @click.native="modelShowAction('screenGroupvolume')">
                {{dispatchSearchForm.stationRank===''?'运量':stationRankRoul[+dispatchSearchForm.stationRank-1].name}}&nbsp;&nbsp;
                <Icon type="arrow-down-b"></Icon>
              </i-col>
              <i-col span="4" class="screenBarItem" @click.native="modelShowAction('screenGroupOther')">
                <Icon type="android-more-vertical" size="24" style="margin-top:11px;"></Icon>
              </i-col>
            </Row>
          </div>
          <div class="screenSelectInfoStation" v-if="modelShow.screenGroupStation">
            <div class="screenSelectInfoStationIcon">
              <Icon type="arrow-up-b" size="20" color="#173A58"></Icon>
            </div>
            <Row class="infoDetailRow">
              <i-col @click.native="dispatchSearchForm.free='',modelShow.screenGroupStation=false,dispatchSearchForm.mapZoom=6">
                <!--<Icon type="record" :style="stationColorAllContent['全疆电子票据总量']"></Icon>-->
                全疆货运中心
              </i-col>
            </Row>
            <template v-for="(item,i) in freightCenterList">
              <Row @click.native="dispatchSearchForm.free=item.free,modelShow.screenGroupStation=false,dispatchSearchForm.mapZoom=8" :class="(i+1)%2===0?'infoDetailRow':'infoDetailRowBackfround'">
                <i-col>
                  <!--<Icon type="record" :style="stationColorAllContent[item.free]" size="1"></Icon>&nbsp;-->{{item.free}}
                </i-col>
              </Row>
            </template>
          </div>
          <div class="screenSelectInfoProduct" v-if="modelShow.screenGroupProduct">
            <div class="screenSelectInfoStationIcon">
              <Icon type="arrow-up-b" size="20" color="#173A58"></Icon>
            </div>
            <Row class="infoDetailRow">
              <i-col @click.native="dispatchSearchForm.typeId='',modelShow.screenGroupProduct=false">全部品名</i-col>
            </Row>
            <template v-for="(item,i) in categoryList">
              <Row @click.native="dispatchSearchForm.typeId=item.id,modelShow.screenGroupProduct=false" :class="(i+1)%2===0?'infoDetailRow':'infoDetailRowBackfround'">
                <i-col>{{item.name}}</i-col>
              </Row>
            </template>
          </div>
          <div class="screenSelectInfoVolume" v-if="modelShow.screenGroupvolume">
            <div class="screenSelectInfoStationIcon">
              <Icon type="arrow-up-b" size="20" color="#173A58"></Icon>
            </div>
            <Row class="infoDetailRow" @click.native="dispatchSearchForm.stationRank='',modelShow.screenGroupvolume=false">
              <i-col>全部运量</i-col>
            </Row>
            <template v-for="(item,i) in stationRankRoul">
              <Row @click.native="dispatchSearchForm.stationRank=i+1,modelShow.screenGroupvolume=false" :class="(i+1)%2===0?'infoDetailRow':'infoDetailRowBackfround'">
                <i-col>{{item.qj}}</i-col>
              </Row>
            </template>
          </div>
          <div class="screenSelectInfo" v-if="modelShow.screenGroupOther">
            <div class="screenSelectInfoIcon">
              <Icon type="arrow-up-b" size="20" color="#173A58"></Icon>
            </div>
            <Row style="border-bottom:1px solid #225D92;padding: 5px 0;margin: 0 10px;">
              <i-col style="font-size: 20px;color: #44C0FF;">筛选</i-col>
            </Row>
            <Row style="padding: 5px 0;margin: 0 10px;margin-top: 5px;">
              <i-col style="cursor:pointer;" span="9" :class="dispatchSearchFormSX.keyPointZntx?'selectItem':'unselectItem'"
                     @click.native="handleSelect('keyPointZntx')">
                有站内掏箱&nbsp;&nbsp;<Icon type="checkmark-round" size="12"></Icon>
              </i-col>
              <i-col style="cursor:pointer;" push="1" span="14" :class="dispatchSearchFormSX.keyPointZnxygl?'selectItem':'unselectItem'" @click.native="handleSelect('keyPointZnxygl')">
                有站内箱源管理需求&nbsp;&nbsp;<Icon type="checkmark-round" size="12"></Icon>
              </i-col>
            </Row>
            <Row style="padding: 5px 0;margin: 0 10px;">
              <i-col style="cursor:pointer;" span="13" :class="dispatchSearchFormSX.keyPointFreightJqsd?'selectItem':'unselectItem'" @click.native="handleSelect('keyPointFreightJqsd')">
                有接取送达业务&nbsp;&nbsp;<Icon type="checkmark-round" size="12"></Icon>
              </i-col>
              <i-col push="1" span="10" :class="dispatchSearchFormSX.keyPointFreightBiz?'selectItem':'unselectItem'" @click.native="handleSelect('keyPointFreightBiz')">
                能办理货运业务&nbsp;&nbsp;<Icon type="checkmark-round" size="12"></Icon>
              </i-col>
            </Row>
            <Row style="padding: 5px 0;margin: 0 10px;">
              <i-col style="cursor:pointer;" span="13" :class="dispatchSearchFormSX.keyPointPfrotocolFleet?'selectItem':'unselectItem'" @click.native="handleSelect('keyPointPfrotocolFleet')">
                有协议车队&nbsp;&nbsp;<Icon type="checkmark-round" size="12"></Icon>
              </i-col>
              <i-col style="cursor:pointer;" push="1" span="10" :class="dispatchSearchFormSX.keyPointKxhl?'selectItem':'unselectItem'" @click.native="handleSelect('keyPointKxhl')">
                有空箱回流需求&nbsp;&nbsp;<Icon type="checkmark-round" size="12"></Icon>
              </i-col>
            </Row>
          </div>
        </div>
        <!-- 右侧所有场站电子票据 -->
        <div v-if="previewModeShow===0" class="allElectronicBill">
          <div class="allElectronicBillBackground">
            <div class="quadrilateral borderLeft">
              <div style="width: 100%" class="borderTop"></div>
            </div>
            <div class="diamond"></div>
            <div class="frameBorder"></div>
            <div style="position:absolute;right:0;top:0;height: 100%;z-index: 400;" class="borderRight"></div>
            <div style="position:absolute;right:0;bottom:0;width: 280px;z-index: 400;" class="borderBottom"></div>
          </div>
          <div class="allElectronicBillDetail">
            <Row style="padding: 5px 0 10px 0;border-bottom: 1px solid #225D92;">
              <i-col span="12" style="text-align:center;font-size: 14px; background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(226,251,255,1)), to(rgba(107,194,255,1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;">
                全疆公铁转运数据总量
                <!--全疆联运电子票据日总量 {{electronicBillcount}} 单-->
              </i-col>
              <i-col span="12" style="text-align: right;">
                <ButtonGroup>
                  <Button type="primary" style="cursor:pointer;" size="small" :class="feightCountListSelect==='day'?'buttonGroupActive':''" @click.native="feightCountListSelect='day'">日</Button>
                  <Button type="primary" style="cursor:pointer;" size="small" :class="feightCountListSelect==='month'?'buttonGroupActive':''" @click.native="feightCountListSelect='month'">月</Button>
                  <Button type="primary" style="cursor:pointer;" size="small" :class="feightCountListSelect==='year'?'buttonGroupActive':''" @click.native="feightCountListSelect='year'">年</Button>
                </ButtonGroup>
              </i-col>
            </Row>
            <template v-for="(item,i) in feightCountListDay" v-if="feightCountListSelect==='day'?true:false">
              <Row :class="(i+1)%2===0?'infoDetailRowBackfround':'infoDetailRow'">
                <i-col span="14">
                  <Icon type="record" :style="stationColorAllContent[item.freightName]"></Icon>&nbsp;
                  {{item.freightName}}
                </i-col>
                <i-col span="10" style="text-align: right">
                  {{(+item.cnt/10000)>=100?Math.round(+item.cnt/10000)+'万':item.cnt}} 单
                </i-col>
              </Row>
            </template>
            <template v-for="(item,i) in feightCountListMonth" v-if="feightCountListSelect==='month'?true:false">
              <Row :class="(i+1)%2===0?'infoDetailRowBackfround':'infoDetailRow'">
                <i-col span="14">
                  <Icon type="record" :style="stationColorAllContent[item.freightName]"></Icon>&nbsp;
                  {{item.freightName}}
                </i-col>
                <i-col span="10" style="text-align: right">
                  {{(+item.cnt/10000)>=100?Math.round(+item.cnt/10000)+'万':item.cnt}} 单
                </i-col>
              </Row>
            </template>
            <template v-for="(item,i) in feightCountListYear" v-if="feightCountListSelect==='year'?true:false">
              <Row :class="(i+1)%2===0?'infoDetailRowBackfround':'infoDetailRow'">
                <i-col span="14">
                  <Icon type="record" :style="stationColorAllContent[item.freightName]"></Icon>&nbsp;
                  {{item.freightName}}
                </i-col>
                <i-col span="10" style="text-align: right">
                  {{(+item.cnt/10000)>=100?Math.round(+item.cnt/10000)+'万':item.cnt}} 单
                </i-col>
              </Row>
            </template>
          </div>
        </div>
        <!-- 单个场站数据展示框 -->
        <div class="oneStationInfo" :style="(allStationBillDay[currentRow.stationName].cnt||allStationBillMonth[currentRow.stationName].cnt||allStationBillYear[currentRow.stationName].cnt)?'width:570px;':'width:400px;margin-left:-200px;'"
             v-if="modelShow.infoDetailShow">
          <div class="oneStationInfoDetail">
            <div class="oneStationInfoDetailBackground">
              <div class="diamondRight">
                <div class="quadrilateral"></div>
                <div class="diamond"></div>
              </div>
              <div class="quadrilateral"></div>
              <div class="diamondLeft">
                <div class="quadrilateral"></div>
                <div class="diamond"></div>
              </div>
              <div class="borderLeft" style="height: 220px;position: absolute;z-index: 250;top:0;left:0;"></div>
              <div class="borderTop" style="width: 380px;position: absolute;z-index: 250;top:0;left:0;"></div>
              <div class="borderRight" style="height: 220px;position: absolute;z-index: 250;top:20px;right:0;"></div>
              <div class="borderBottom" style="width: 380px;position: absolute;z-index: 250;bottom:0;right:0;"></div>
              <div class="frameBorderTop"></div>
              <div class="frameBorderBottom"></div>
            </div>
            <div class="oneStationInfoDetailContent">
              <Row style="padding:0 0 5px 0;border-bottom:1px solid rgba(142,233,255,0.30);">
                <i-col span="20">
                  <span style="font-size: 20px;" :style="stationColor">{{currentRow.stationName}}</span>
                  <span style="font-size: 12px;color: #457387;margin-left: 5px;">「 {{currentRow.dataStation.free}} 」</span>
                </i-col>
                <i-col span="4" style="text-align: right;cursor:pointer;" @click.native="oneStationInfoClose">
                  <Icon type="close-round" size="20" color="#69A3C6" style="margin-top: 5px;"></Icon>
                </i-col>
              </Row>
              <Row class="infoDetailRow">
                <i-col span="10">大宗整车运输业务量</i-col>
                <i-col span="14">{{currentRow.transBizZcZb}}「 年运量：{{currentRow.transBizZcNyl}} 」</i-col>
              </Row>
              <Row class="infoDetailRowBackfround">
                <i-col span="10">集装箱运输业务量</i-col>
                <i-col span="14">{{currentRow.transBizJzxZb}}「 年运量：{{currentRow.transBizJzxNyl}} 」</i-col>
              </Row>
              <Row class="infoDetailRow">
                <i-col span="10">发站与到站货物量占比</i-col>
                <i-col span="14">发站：{{currentRow.keyPointZbFz}} &nbsp;&nbsp;&nbsp;&nbsp; 到站：{{currentRow.keyPointZbDz}}</i-col>
              </Row>
              <Row class="infoDetailRowBackfround">
                <i-col span="10">主要品类</i-col>
                <i-col span="14">
                  <span v-if="!currentRow.stationInfoCategories">{{currentRow.transBizType}}</span>
                  <span v-if="currentRow.stationInfoCategories.length>0">{{currentRow.stationInfoCategories.length>=3?currentRow.stationInfoCategories[0].stationCategory.name+'、'+currentRow.stationInfoCategories[1].stationCategory.name+'、'+currentRow.stationInfoCategories[2].stationCategory.name:currentRow.stationInfoCategories[0].stationCategory.name}}
                </span>
                </i-col>
              </Row>
              <Row class="infoDetailRow">
                <i-col span="10">货场面积</i-col>
                <i-col span="14">{{currentRow.basicInfostationArea}}</i-col>
              </Row>
              <Row style="margin: 5px 0;">
                <i-col span="24" style="text-align: right;font-size: 14px;color: #5CA7FF;cursor:pointer;"><span @click="modelShow.infoDetailShowAll=true">详情&nbsp;></span></i-col>
              </Row>
            </div>
          </div>
          <div class="oneStationInfoWaybill" v-if="wayBillListSelect==='day'&&(allStationBillDay[currentRow.stationName].cnt>0||allStationBillDay[currentRow.stationName].cnt)">
            <div class="selectButton" v-if="showWayBillListSelectButton">
              <Row v-if="wayBillListSelect==='day'?false:true" @click.native="wayBillListSelect='day',showWayBillListSelectButton=false">
                <i-col style="font-size: 12px;color: #66B7F2;padding: 4px 0;text-align: center;cursor:pointer;">日</i-col>
              </Row>
              <Row v-if="wayBillListSelect==='month'?false:true" @click.native="wayBillListSelect='month',showWayBillListSelectButton=false">
                <i-col style="font-size: 12px;color: #66B7F2;padding: 4px 0;text-align: center;cursor:pointer;">月</i-col>
              </Row>
              <Row v-if="wayBillListSelect==='year'?false:true" @click.native="wayBillListSelect='year',showWayBillListSelectButton=false">
                <i-col style="font-size: 12px;color: #66B7F2;padding: 4px 0;text-align: center;cursor:pointer;">年</i-col>
              </Row>
            </div>
            <div class="title">
              <div class="titleBackground">
                <div class="diamond">
                  <div class="diamondLeft">
                    <div class="diamondLeftTop"></div>
                  </div>
                  <div class="diamondCenter"></div>
                  <div class="diamondRight">
                    <div class="diamondRightTop"></div>
                  </div>
                </div>
                <div class="quadrilateral"></div>
              </div>
              <div class="titleContent">
                <Row>
                  <i-col span="18" style="text-align: center;font-size: 14px;color: #FFFFFF;padding-top: 6px;">联运公铁转运数据</i-col>
                  <i-col span="6" style="font-size: 12px;color: #66B7F2;padding-top: 8px;cursor:pointer;" @click.native="showWayBillListSelectButton=true">
                    <span v-if="wayBillListSelect==='day'?true:false">日</span>
                    <span v-if="wayBillListSelect==='month'?true:false">月</span>
                    <span v-if="wayBillListSelect==='year'?true:false">年</span>
                    <Icon type="arrow-down-b"></Icon>
                  </i-col>
                </Row>
              </div>
            </div>
            <div class="titleCount">
              <Row style="">
                <i-col style="text-align: center;font-size: 26px;padding-top: 3px;" :style="stationColor">
                  {{allStationBillDay[currentRow.stationName].cnt/10000>=1?Math.round(allStationBillDay[currentRow.stationName].cnt/10000)+' 万':allStationBillDay[currentRow.stationName].cnt}}
                  <span style="font-size: 12px;">单</span>
                </i-col>
              </Row>
            </div>
            <div class="wayBillList">
              <div class="wayBillListRow" v-for="item in allStationBillDay[currentRow.stationName].billList">
                <Row v-if="item.trainNumber">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">车号：{{item.trainNumber?item.trainNumber:''}}</i-col>
                </Row>
                <Row v-if="item.truckCode">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">箱号：{{item.truckCode?item.truckCode:''}}</i-col>
                </Row>
                <Row v-if="item.time">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">时间：{{item.time?item.time:''}}</i-col>
                </Row>
                <Row v-if="item.truckNo">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">车号：{{item.truckNo?item.truckNo:''}}</i-col>
                </Row>
                <Row v-if="item.containerNo">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">箱号：{{item.containerNo?item.containerNo:''}}</i-col>
                </Row>
                <Row v-if="item.inOut">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">状态：{{item.inOut?item.inOut:''}}</i-col>
                </Row>
                <Row v-if="item.getTime">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">时间：{{item.getTime?item.getTime:''}}</i-col>
                </Row>
              </div>
            </div>
            <div class="bottomShadow"></div>
          </div>
          <div class="oneStationInfoWaybill" v-if="wayBillListSelect==='month'&&(allStationBillMonth[currentRow.stationName].cnt>0||allStationBillMonth[currentRow.stationName].cnt)">
            <div class="selectButton" v-if="showWayBillListSelectButton">
              <Row v-if="wayBillListSelect==='day'?false:true" @click.native="wayBillListSelect='day',showWayBillListSelectButton=false">
                <i-col style="font-size: 12px;color: #66B7F2;padding: 4px 0;text-align: center;cursor:pointer;">日</i-col>
              </Row>
              <Row v-if="wayBillListSelect==='month'?false:true" @click.native="wayBillListSelect='month',showWayBillListSelectButton=false">
                <i-col style="font-size: 12px;color: #66B7F2;padding: 4px 0;text-align: center;cursor:pointer;">月</i-col>
              </Row>
              <Row v-if="wayBillListSelect==='year'?false:true" @click.native="wayBillListSelect='year',showWayBillListSelectButton=false">
                <i-col style="font-size: 12px;color: #66B7F2;padding: 4px 0;text-align: center;cursor:pointer;">年</i-col>
              </Row>
            </div>
            <div class="title">
              <div class="titleBackground">
                <div class="diamond">
                  <div class="diamondLeft">
                    <div class="diamondLeftTop"></div>
                  </div>
                  <div class="diamondCenter"></div>
                  <div class="diamondRight">
                    <div class="diamondRightTop"></div>
                  </div>
                </div>
                <div class="quadrilateral"></div>
              </div>
              <div class="titleContent">
                <Row>
                  <i-col span="18" style="text-align: center;font-size: 14px;color: #FFFFFF;padding-top: 6px;">联运公铁转运数据</i-col>
                  <i-col span="6" style="font-size: 12px;color: #66B7F2;padding-top: 8px;cursor:pointer;" @click.native="showWayBillListSelectButton=true">
                    <span v-if="wayBillListSelect==='day'?true:false">日</span>
                    <span v-if="wayBillListSelect==='month'?true:false">月</span>
                    <span v-if="wayBillListSelect==='year'?true:false">年</span>
                    <Icon type="arrow-down-b"></Icon>
                  </i-col>
                </Row>
              </div>
            </div>
            <div class="titleCount">
              <Row style="">
                <i-col style="text-align: center;font-size: 26px;padding-top: 3px;" :style="stationColor">
                  {{allStationBillMonth[currentRow.stationName].cnt/10000>=1?Math.round(allStationBillMonth[currentRow.stationName].cnt/10000)+' 万':allStationBillMonth[currentRow.stationName].cnt}}
                  <span style="font-size: 12px;">单</span>
                </i-col>
              </Row>
            </div>
            <div class="wayBillList">
              <div class="wayBillListRow" v-for="item in allStationBillMonth[currentRow.stationName].billList">
                <Row v-if="item.trainNumber">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">车号：{{item.trainNumber?item.trainNumber:''}}</i-col>
                </Row>
                <Row v-if="item.truckCode">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">箱号：{{item.truckCode?item.truckCode:''}}</i-col>
                </Row>
                <Row v-if="item.time">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">时间：{{item.time?item.time:''}}</i-col>
                </Row>
                <Row v-if="item.truckNo">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">车号：{{item.truckNo?item.truckNo:''}}</i-col>
                </Row>
                <Row v-if="item.containerNo">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">箱号：{{item.containerNo?item.containerNo:''}}</i-col>
                </Row>
                <Row v-if="item.inOut">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">状态：{{item.inOut?item.inOut:''}}</i-col>
                </Row>
                <Row v-if="item.getTime">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">时间：{{item.getTime?item.getTime:''}}</i-col>
                </Row>
              </div>
            </div>
            <div class="bottomShadow"></div>
          </div>
          <div class="oneStationInfoWaybill" v-if="wayBillListSelect==='year'&&(allStationBillYear[currentRow.stationName].cnt>0||allStationBillYear[currentRow.stationName].cnt)">
            <div class="selectButton" v-if="showWayBillListSelectButton">
              <Row v-if="wayBillListSelect==='day'?false:true" @click.native="wayBillListSelect='day',showWayBillListSelectButton=false">
                <i-col style="font-size: 12px;color: #66B7F2;padding: 4px 0;text-align: center;cursor:pointer;">日</i-col>
              </Row>
              <Row v-if="wayBillListSelect==='month'?false:true" @click.native="wayBillListSelect='month',showWayBillListSelectButton=false">
                <i-col style="font-size: 12px;color: #66B7F2;padding: 4px 0;text-align: center;cursor:pointer;">月</i-col>
              </Row>
              <Row v-if="wayBillListSelect==='year'?false:true" @click.native="wayBillListSelect='year',showWayBillListSelectButton=false">
                <i-col style="font-size: 12px;color: #66B7F2;padding: 4px 0;text-align: center;cursor:pointer;">年</i-col>
              </Row>
            </div>
            <div class="title">
              <div class="titleBackground">
                <div class="diamond">
                  <div class="diamondLeft">
                    <div class="diamondLeftTop"></div>
                  </div>
                  <div class="diamondCenter"></div>
                  <div class="diamondRight">
                    <div class="diamondRightTop"></div>
                  </div>
                </div>
                <div class="quadrilateral"></div>
              </div>
              <div class="titleContent">
                <Row>
                  <i-col span="18" style="text-align: center;font-size: 14px;color: #FFFFFF;padding-top: 6px;">联运公铁转运数据</i-col>
                  <i-col span="6" style="font-size: 12px;color: #66B7F2;padding-top: 8px;cursor:pointer;" @click.native="showWayBillListSelectButton=true">
                    <span v-if="wayBillListSelect==='day'?true:false">日</span>
                    <span v-if="wayBillListSelect==='month'?true:false">月</span>
                    <span v-if="wayBillListSelect==='year'?true:false">年</span>
                    <Icon type="arrow-down-b"></Icon>
                  </i-col>
                </Row>
              </div>
            </div>
            <div class="titleCount">
              <Row style="">
                <i-col style="text-align: center;font-size: 26px;padding-top: 3px;" :style="stationColor">
                  {{allStationBillYear[currentRow.stationName].cnt/10000>=1?Math.round(allStationBillYear[currentRow.stationName].cnt/10000)+' 万':allStationBillYear[currentRow.stationName].cnt}}
                  <span style="font-size: 12px;">单</span>
                </i-col>
              </Row>
            </div>
            <div class="wayBillList">
              <div class="wayBillListRow" v-for="item in allStationBillYear[currentRow.stationName].billList">
                <Row v-if="item.trainNumber">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">车号：{{item.trainNumber?item.trainNumber:''}}</i-col>
                </Row>
                <Row v-if="item.truckCode">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">箱号：{{item.truckCode?item.truckCode:''}}</i-col>
                </Row>
                <Row v-if="item.time">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">时间：{{item.time?item.time:''}}</i-col>
                </Row>
                <Row v-if="item.truckNo">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">车号：{{item.truckNo?item.truckNo:''}}</i-col>
                </Row>
                <Row v-if="item.containerNo">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">箱号：{{item.containerNo?item.containerNo:''}}</i-col>
                </Row>
                <Row v-if="item.inOut">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">状态：{{item.inOut?item.inOut:''}}</i-col>
                </Row>
                <Row v-if="item.getTime">
                  <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">时间：{{item.getTime?item.getTime:''}}</i-col>
                </Row>
              </div>
            </div>
            <div class="bottomShadow"></div>
          </div>
        </div>
        <!-- 地图缩放、预览模式 -->
        <div class="mapButton">
          <div v-if="hasPreviewMode===true" class="previewMode" @click="oneStationInfoClose" style="background: #225D92;">
            <i></i>
          </div>
          <div v-if="hasPreviewMode===false" class="previewMode" @click="mapPreview" style="background:#173A58;">
            <i></i>
          </div>
        </div>
      </i-col>
    </Row>
  </div>
</template>
<script>
  import hw from '@components/common/heightAndWidth'
  import {
    getStationMemberList,
    getFreightCenterList,
    getCategoryList,
    getStationInfoList,
    getStationInfoListInMap,
    getStationWayBillCount,
    getFeightCountList,
    getAllStationBillList,
    getStationMainOrderList,
    getFrightMainOrderCountList
  } from '@api/lightStation/station'
  import {SquareOverlay, ZoomControl} from './js/draw'
  import {bdEncrypt} from './js/coordinateTransformation'
  import {MP} from '@components/bmap'
  import autoSelect2 from './components/autoSelect2.vue'
  import moment from 'moment'
  import _ from 'lodash'

  export default {
    name: 'storage',
    data () {
      let previewModeShow = 0
      let showWayBillListSelectButton = false
      let wayBillListSelect = 'day'
      let feightCountListSelect = 'day'
      let allStationBill = {}
      let allStationBillDay = {}
      let allStationBillMonth = {}
      let allStationBillYear = {}
      let stationForm = {
        railwayBureauCode: '',
        transportCenter: '',
        stationCode: ''
      }
      let screenGroupFrom = {
        screenGroupStationName: '',
        screenGroupProductName: '',
        screenGroupvolumePj: '',
        screenGroupOther: ''
      }
      let layoutHeight = 500
      let stationList = []
      let dispatchSearchFormStation = {
        stationName: ''
      }
      let showStationWayBillCount = false
      let dispatchSearchForm = {
        free: '',
        typeId: '',
        stationRank: '',
        mapZoom: 6
      }
      let dispatchSearchFormSX = {
        keyPointZntx: false,
        keyPointZnxygl: false,
        keyPointFreightJqsd: false,
        keyPointFreightBiz: false,
        keyPointPfrotocolFleet: false,
        keyPointKxhl: false
      }
      let modelShow = {
        infoDetailShowAll: false,
        infoDetailShow: false,
        screenGroupStation: false,
        screenGroupProduct: false,
        screenGroupvolume: false,
        screenGroupOther: false
      }
      let stationColorAll = {
        wlmq: '#44C0FF',
        hm: '#FB943A',
        kel: '#A1BF50',
        ks: '#DD2037',
        kt: '#24C4A0'
      }
      let stationColorAllContent = {
        '乌鲁木齐货运中心': 'color:#44C0FF',
        '哈密货运中心': 'color:#FB943A',
        '喀什货运中心': 'color:#DD2037',
        '奎屯货运中心': 'color:#24C4A0',
        '库尔勒货运中心': 'color:#A1BF50',
        '全疆电子票据总量': 'color:transparent'
      }
      let stationCenterList = [
        {
          stationCenter: '乌鲁木齐货运中心',
          point: [87.606041, 43.832012],
          color: '#44C0FF'
        },
        {
          stationCenter: '哈密货运中心',
          point: [93.518582, 42.840533],
          color: '#FB943A'
        },
        {
          stationCenter: '喀什货运中心',
          point: [76.000323, 39.473669],
          color: '#DD2037'
        },
        {
          stationCenter: '奎屯货运中心',
          point: [84.90832, 44.435941],
          color: '#24C4A0'
        },
        {
          stationCenter: '库尔勒货运中心',
          point: [86.180078, 41.736061],
          color: '#A1BF50'
        }
      ]
      let stationRankRoul = [
        {name: '一级', qj: '100万吨以上', id: '1'},
        {name: '二级', qj: '51万吨～100万吨', id: '2'},
        {name: '三级', qj: '31万吨～50万吨', id: '3'},
        {name: '四级', qj: '11万吨～30万吨', id: '4'},
        {name: '五级', qj: '0～10万吨', id: '5'}
      ]
      let stationRankCurrent = {}
      let BMapStyle = [
        {
          'featureType': 'water',
          'elementType': 'all',
          'stylers': {
            'color': '#021019'
          }
        },
        {
          'featureType': 'highway',
          'elementType': 'geometry.fill',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'highway',
          'elementType': 'geometry.stroke',
          'stylers': {
            'color': '#147a92'
          }
        },
        {
          'featureType': 'arterial',
          'elementType': 'geometry.fill',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'arterial',
          'elementType': 'geometry.stroke',
          'stylers': {
            'color': '#0b3d51'
          }
        },
        {
          'featureType': 'local',
          'elementType': 'geometry',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'land',
          'elementType': 'all',
          'stylers': {
            'color': '#08304b'
          }
        },
        {
          'featureType': 'railway',
          'elementType': 'geometry.fill',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'railway',
          'elementType': 'geometry.stroke',
          'stylers': {
            'color': '#08304b'
          }
        },
        {
          'featureType': 'subway',
          'elementType': 'geometry',
          'stylers': {
            'lightness': -70
          }
        },
        {
          'featureType': 'building',
          'elementType': 'geometry.fill',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'all',
          'elementType': 'labels.text.fill',
          'stylers': {
            'color': '#857f7f'
          }
        },
        {
          'featureType': 'all',
          'elementType': 'labels.text.stroke',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'building',
          'elementType': 'geometry',
          'stylers': {
            'color': '#022338'
          }
        },
        {
          'featureType': 'green',
          'elementType': 'geometry',
          'stylers': {
            'color': '#062032'
          }
        },
        {
          'featureType': 'boundary',
          'elementType': 'all',
          'stylers': {
            'color': '#1e1c1c'
          }
        },
        {
          'featureType': 'manmade',
          'elementType': 'geometry',
          'stylers': {
            'color': '#022338'
          }
        },
        {
          'featureType': 'poi',
          'elementType': 'all',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'all',
          'elementType': 'labels.icon',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'all',
          'elementType': 'labels.text.fill',
          'stylers': {
            'color': '#2da0c6',
            'visibility': 'on'
          }
        },
        {
          'featureType': 'railway',
          'elementType': 'labels.text.stroke',
          'stylers': {
            'color': '#00ffffff',
            'weight': '1.4',
            'visibility': 'on'
          }
        },
        {
          'featureType': 'railway',
          'elementType': 'geometry.stroke',
          'stylers': {
            'color': '#ff0000ff',
            'hue': '#00ffff',
            'weight': '1.3',
            'visibility': 'on'
          }
        }
      ]
      let mapStationList = []
      let railwayList = []
      let queryRailway = []
      let freightCenterList = []
      let currentRow = {}
      let categoryList = {}
      let map = []
      let stationColor = {
        color: ''
      }
      let feightCountList = {}
      let feightCountListDay = {}
      let feightCountListYear = {}
      let feightCountListMonth = {}
      let stationListInfoDay = []
      let stationListInfoMonth = []
      let stationListInfoYear = []
      let electronicBillcount = 0
      let beforeStationName = ''
      let timeOutObj = true
      let stationWayBillCount = 0
      let stationWayBillList = []
      let currentRowCount = 0
      let hasPreviewMode = false
      let firstLorderWho = '石河子'
      let mapCenterPoint = [87.606043, 43.832012]
      let datas = {
        stationCenterList,
        stationListInfoDay,
        stationListInfoMonth,
        stationListInfoYear,
        firstLorderWho,
        stationColorAllContent,
        previewModeShow,
        showWayBillListSelectButton,
        wayBillListSelect,
        feightCountListSelect,
        feightCountListDay,
        feightCountListYear,
        feightCountListMonth,
        hasPreviewMode,
        mapStationList,
        showStationWayBillCount,
        BMapStyle,
        stationForm,
        railwayList,
        queryRailway,
        layoutHeight,
        dispatchSearchForm,
        stationList,
        modelShow,
        map,
        freightCenterList,
        categoryList,
        currentRow,
        stationColor,
        stationColorAll,
        stationRankRoul,
        stationRankCurrent,
        screenGroupFrom,
        feightCountList,
        electronicBillcount,
        beforeStationName,
        timeOutObj,
        stationWayBillCount,
        stationWayBillList,
        dispatchSearchFormStation,
        dispatchSearchFormSX,
        allStationBill,
        allStationBillDay,
        allStationBillMonth,
        allStationBillYear,
        currentRowCount,
        mapCenterPoint
      }
      return datas
    },
    methods: {
      handleSelect (who) {
        this.dispatchSearchFormSX[who] = !this.dispatchSearchFormSX[who]
      },
      mapPreviewTimeOut () {
        if (this.timeOutObj) {
          this.hasPreviewMode = true
          if (this.currentRowCount === this.mapStationList.length) {
            this.currentRowCount = 0
          }
          if (this.mapStationList[this.currentRowCount].dataStation) {
            let point = new BMap.Point(parseFloat(this.mapStationList[this.currentRowCount].dataStation.stationLat), parseFloat(this.mapStationList[this.currentRowCount].dataStation.stationLng))
            this.map.panTo(point)
            this.showStationInfo(this.mapStationList[this.currentRowCount])
          }
          setTimeout(() => {
            this.currentRowCount++
            this.mapPreviewTimeOut()
          }, 3000)
        } else {
          return false
        }
      },
      mapPreview () {
        this.timeOutObj = true
        this.currentRowCount = 0
        this.previewModeShow = 1
        this.mapPreviewTimeOut()
      },
      modelShowAction (who) {
        let modelShow = {}
        if (who === 'screenGroupStation') {
          modelShow = {
            screenGroupStation: !this.modelShow.screenGroupStation,
            screenGroupProduct: false,
            screenGroupvolume: false,
            screenGroupOther: false
          }
        } else if (who === 'screenGroupProduct') {
          modelShow = {
            screenGroupStation: false,
            screenGroupProduct: !this.modelShow.screenGroupProduct,
            screenGroupvolume: false,
            screenGroupOther: false
          }
        } else if (who === 'screenGroupvolume') {
          modelShow = {
            screenGroupStation: false,
            screenGroupProduct: false,
            screenGroupvolume: !this.modelShow.screenGroupvolume,
            screenGroupOther: false
          }
        } else if (who === 'screenGroupOther') {
          modelShow = {
            screenGroupStation: false,
            screenGroupProduct: false,
            screenGroupvolume: false,
            screenGroupOther: !this.modelShow.screenGroupOther
          }
        }
        this.modelShow = Object.assign(this.modelShow, modelShow)
      },
      loadSelectList () {
        getFreightCenterList().then(res => {
          if (res.data.isSuccess === 1) {
            this.freightCenterList = res.data.data
          }
        })
        getCategoryList().then(res => {
          if (res.data.isSuccess === 1) {
            this.categoryList = res.data.data
          }
        })
        getStationMemberList(this.stationForm).then(res => {
          if (res.data.isSuccess === 1) {
            this.stationList = res.data.data
          }
        })
      },
      StationWayBillCount (name) {
        let stationName = name
        getStationWayBillCount({'stationName': stationName}).then(res => {
          if (res.data.isSuccess === 1) {
            this.stationWayBillCount = res.data.data
            if (+this.stationWayBillCount > 0) {
              this.showStationWayBillCount = true
            }
          }
        })
      },
      setTimeoutGetfeightCount () {
        this.getFrightMainOrderCountListInfo()
        this.getStationMainOrderListInfo()
        setTimeout(() => {
          this.getFrightMainOrderCountListInfo()
          this.getStationMainOrderListInfo()
          this.setTimeoutGetfeightCount()
        }, 300000)
      },
      getStationMainOrderListInfo () {
        let allStationBillDay = {}
        let allStationInfoDay = {}
        getAllStationBillList({'startTime': moment().format('YYYY-MM-DD') + ' 00:00:00', 'endTime': moment().format('YYYY-MM-DD') + ' 23:59:59'}).then(res => {
          if (res.data.isSuccess === 1) {
            allStationBillDay = res.data.data
            getStationMainOrderList({'startTime': moment().format('YYYY-MM-DD') + ' 00:00:00', 'endTime': moment().format('YYYY-MM-DD') + ' 23:59:59'}).then(res => {
              if (res.data.isSuccess === 1) {
                allStationInfoDay = res.data.data
                _.forEach(allStationBillDay, (item, key) => {
                  if (item.cnt <= 0) {
                    allStationBillDay[key] = allStationInfoDay[key]
                  }
                })
                this.allStationBillDay = allStationBillDay
                /* let groupStation = _.groupBy(res.data.data, (item) => {
                 if (item.dataStation.free) {
                 return item.dataStation.free
                 }
                 })
                 console.log(groupStation) */
              }
            })
          }
        })
        let allStationBillMonth = {}
        let allStationInfoMonth = {}
        getAllStationBillList({'startTime': moment().month(moment().month() - 1).format('YYYY-MM-DD') + ' 00:00:00', 'endTime': moment().format('YYYY-MM-DD') + ' 23:59:59'}).then(res => {
          if (res.data.isSuccess === 1) {
            allStationBillMonth = res.data.data
            getStationMainOrderList({'startTime': moment().month(moment().month() - 1).format('YYYY-MM-DD') + ' 00:00:00', 'endTime': moment().format('YYYY-MM-DD') + ' 23:59:59'}).then(res => {
              if (res.data.isSuccess === 1) {
                allStationInfoMonth = res.data.data
                _.forEach(allStationBillMonth, (item, key) => {
                  if (item.cnt <= 0) {
                    allStationBillMonth[key] = allStationInfoMonth[key]
                  }
                })
                this.allStationBillMonth = allStationBillMonth
              }
            })
          }
        })
        let allStationBillYear = {}
        let allStationInfoYear = {}
        getAllStationBillList({'startTime': moment().year() - 1 + '-' + moment().month(moment().month()).format('MM-DD') + ' 00:00:00', 'endTime': moment().format('YYYY-MM-DD') + ' 23:59:59'}).then(res => {
          if (res.data.isSuccess === 1) {
            allStationBillYear = res.data.data
            getStationMainOrderList({'startTime': moment().year() - 1 + '-' + moment().month(moment().month()).format('MM-DD') + ' 00:00:00', 'endTime': moment().format('YYYY-MM-DD') + ' 23:59:59'}).then(res => {
              if (res.data.isSuccess === 1) {
                allStationInfoYear = res.data.data
                _.forEach(allStationBillYear, (item, key) => {
                  if (item.cnt <= 0) {
                    allStationBillYear[key] = allStationInfoYear[key]
                  }
                })
                this.allStationBillYear = allStationBillYear
              }
            })
          }
        })
      },
      getFrightMainOrderCountListInfo () {
        let feightCountListDay = {}
        let stationFeightCountListDay = {}
        getFeightCountList({'startTime': moment().format('YYYY-MM-DD') + ' 00:00:00', 'endTime': moment().format('YYYY-MM-DD') + ' 23:59:59'}).then(res => {
          if (res.data.isSuccess === 1) {
            feightCountListDay = res.data.data
            getFrightMainOrderCountList({'startTime': moment().format('YYYY-MM-DD') + ' 00:00:00', 'endTime': moment().format('YYYY-MM-DD') + ' 23:59:59'}).then(res => {
              if (res.data.isSuccess === 1) {
                stationFeightCountListDay = res.data.data
                _.forEach(feightCountListDay, (item, key) => {
                  let freightName = item.freightName
                  let count = item.cnt
                  let stationFeight = _.find(stationFeightCountListDay, (item) => {
                    return item.freightName === freightName
                  })
                  count += stationFeight.cnt
                  feightCountListDay[key].cnt = count
                })
                let qjIndex = null
                let qj = _.find(feightCountListDay, (item, key) => {
                  qjIndex = key
                  return item.freightName === '全疆电子票据总量'
                })
                feightCountListDay.splice(qjIndex, 1)
                feightCountListDay.push(qj)
                this.feightCountListDay = feightCountListDay
              }
            })
          }
        })
        let feightCountListMonth = {}
        let stationFeightCountListMonth = {}
        getFeightCountList({'startTime': moment().month(moment().month() - 1).format('YYYY-MM-DD') + ' 00:00:00', 'endTime': moment().format('YYYY-MM-DD') + ' 23:59:59'}).then(res => {
          if (res.data.isSuccess === 1) {
            feightCountListMonth = res.data.data
            getFrightMainOrderCountList({'startTime': moment().month(moment().month() - 1).format('YYYY-MM-DD') + ' 00:00:00', 'endTime': moment().format('YYYY-MM-DD') + ' 23:59:59'}).then(res => {
              if (res.data.isSuccess === 1) {
                stationFeightCountListMonth = res.data.data
                _.forEach(feightCountListMonth, (item, key) => {
                  let freightName = item.freightName
                  let count = item.cnt
                  let stationFeight = _.find(stationFeightCountListMonth, (item) => {
                    return item.freightName === freightName
                  })
                  count += stationFeight.cnt
                  feightCountListMonth[key].cnt = count
                })
                let qjIndex = null
                let qj = _.find(feightCountListMonth, (item, key) => {
                  qjIndex = key
                  return item.freightName === '全疆电子票据总量'
                })
                feightCountListMonth.splice(qjIndex, 1)
                feightCountListMonth.push(qj)
                this.feightCountListMonth = feightCountListMonth
              }
            })
          }
        })
        let feightCountListYear = {}
        let stationFeightCountListYear = {}
        getFeightCountList({'startTime': moment().year() - 1 + '-' + moment().month(moment().month()).format('MM-DD') + ' 00:00:00', 'endTime': moment().format('YYYY-MM-DD') + ' 23:59:59'}).then(res => {
          if (res.data.isSuccess === 1) {
            feightCountListYear = res.data.data
            getFrightMainOrderCountList({'startTime': moment().year() - 1 + '-' + moment().month(moment().month()).format('MM-DD') + ' 00:00:00', 'endTime': moment().format('YYYY-MM-DD') + ' 23:59:59'}).then(res => {
              if (res.data.isSuccess === 1) {
                stationFeightCountListYear = res.data.data
                _.forEach(feightCountListYear, (item, key) => {
                  let freightName = item.freightName
                  let count = item.cnt
                  let stationFeight = _.find(stationFeightCountListYear, (item) => {
                    return item.freightName === freightName
                  })
                  count += stationFeight.cnt
                  feightCountListYear[key].cnt = count
                })
                let qjIndex = null
                let qj = _.find(feightCountListYear, (item, key) => {
                  qjIndex = key
                  return item.freightName === '全疆电子票据总量'
                })
                feightCountListYear.splice(qjIndex, 1)
                feightCountListYear.push(qj)
                this.feightCountListYear = feightCountListYear
              }
            })
          }
        })
      },
      clearTimeOutBillList () {
        this.showStationWayBillCount = false
        this.stationWayBillCount = 0
        this.stationWayBillList = []
        this.timeOutObj = false
      },
      oneStationInfoClose () {
        this.previewModeShow = 0
        this.modelShow.infoDetailShow = false
        this.modelShow.infoDetailShowAll = false
        this.timeOutObj = false
        this.hasPreviewMode = false
        // this.clearTimeOutBillList()
      },
      loadMapData () {
        getStationInfoList().then(res => {
          if (res.data.isSuccess === 1) {
            this.mapStationList = res.data.data
            // this.drawMyBmap(res.data.data, '石河子', 'station')
          }
        })
        this.drawMyBmap(this.stationCenterList, '', 'stationCenter')
      },
      selectStation (param) {
        let modelShow = {
          infoDetailShowAll: false,
          infoDetailShow: false,
          screenGroupStation: false,
          screenGroupProduct: false,
          screenGroupvolume: false
        }
        this.modelShow = Object.assign(this.modelShow, modelShow)
        if (param.free === '' && param.mapZoom < 8) {
          this.drawMyBmap(this.stationCenterList, '', 'stationCenter')
          this.mapCenterPoint = this.stationCenterList[0].point
        } else {
          getStationInfoListInMap(param).then(res => {
            if (res.data.isSuccess === 1) {
              this.drawMyBmap(res.data.data, res.data.data[0].stationName, 'station')
              // this.mapCenterPoint = [parseFloat(res.data.data[0].dataStation.stationLat), parseFloat(res.data.data[0].dataStation.stationLng)]
            }
          })
        }
      },
      drawMyBmap (pointsData, loaderWho, drawType) {
        let that = this
        MP(this.ak).then(BMap => {
          if (!BMap) {
            return
          }
          this.mapStationList = pointsData
          let map = new BMap.Map('allmap', {enableMapClick: false, maxZoom: 18, minZoom: 6})
          that.map = map
          let point = new BMap.Point(parseFloat(that.mapCenterPoint[0]), parseFloat(that.mapCenterPoint[1]))
          let addFun = function () {
            map.zoomTo(map.getZoom() + 1)
            that.dispatchSearchForm.mapZoom = map.getZoom()
          }
          let reduceFun = function () {
            map.zoomTo(map.getZoom() - 1)
            that.dispatchSearchForm.mapZoom = map.getZoom()
          }
          let myZoomCtrl = new ZoomControl(addFun, reduceFun)
          map.addControl(myZoomCtrl)
          map.centerAndZoom(point, that.dispatchSearchForm.mapZoom)
          map.enableScrollWheelZoom()
          map.setMapStyle({styleJson: this.BMapStyle})
          if (drawType === 'station') {
            // 编写自定义函数,创建标注
            let addMarker = (points) => {
              for (let i = 0, len = points.length; i < len; i++) {
                if (points[i].dataStation) {
                  let poointBD = bdEncrypt(parseFloat(points[i].dataStation.stationLng), parseFloat(points[i].dataStation.stationLat))
                  let point = new BMap.Point(poointBD.bdLng, poointBD.bdLat)
                  let pointcolor = ''
                  let pointcolorDot = ''
                  if (points[i].dataStation.free === '乌鲁木齐货运中心') {
                    pointcolor = that.stationColorAll.wlmq
                    pointcolorDot = 'dot1'
                  } else if (points[i].dataStation.free === '哈密货运中心') {
                    pointcolor = that.stationColorAll.hm
                    pointcolorDot = 'dot2'
                  } else if (points[i].dataStation.free === '喀什货运中心') {
                    pointcolor = that.stationColorAll.ks
                    pointcolorDot = 'dot4'
                  } else if (points[i].dataStation.free === '奎屯货运中心') {
                    pointcolor = that.stationColorAll.kt
                    pointcolorDot = 'dot5'
                  } else if (points[i].dataStation.free === '库尔勒货运中心') {
                    pointcolor = that.stationColorAll.kel
                    pointcolorDot = 'dot3'
                  }
                  let pointSize = 0
                  if (+points[i].stationRank === 1) {
                    pointSize = 18
                  } else if (+points[i].stationRank === 2) {
                    pointSize = 16
                  } else if (+points[i].stationRank === 3) {
                    pointSize = 14
                  } else if (+points[i].stationRank === 4) {
                    pointSize = 12
                  } else if (+points[i].stationRank === 5) {
                    pointSize = 10
                  } else if (points[i].stationRank === 'null') {
                    pointSize = 18
                  }
                  let titleName = points[i].stationName
                  let mySquare = new SquareOverlay(point, pointSize, pointcolor, pointcolorDot, titleName)
                  map.addOverlay(mySquare)
                  mySquare.addEventListener('click', function (e) {
                    e.stopPropagation()
                    that.showStationInfo(points[i])
                    that.beforeStationName = points[i].stationName
                    map.panTo(point)
                  })
                }
              }
            }
            addMarker(pointsData)
            map.addEventListener('click', function (e) {
              let modelShow = {
                infoDetailShowAll: false,
                infoDetailShow: false,
                screenGroupStation: false,
                screenGroupProduct: false,
                screenGroupvolume: false,
                screenGroupOther: false
              }
              that.oneStationInfoClose()
              that.modelShow = modelShow
              that.timeOutObj = false
            })
            if (that.dispatchSearchForm.free) {
              let shz = _.find(this.mapStationList, (item) => {
                return item.stationName === loaderWho
              })
              that.showStationInfo(shz)
            } else {
              let shz = _.find(this.mapStationList, (item) => {
                return item.stationName === '石河子'
              })
              that.showStationInfo(shz)
            }
          } else if (drawType === 'stationCenter') {
            let addMarker = (points) => {
              for (let i = 0, len = points.length; i < len; i++) {
                if (points[i].stationCenter) {
                  let point = new BMap.Point(parseFloat(points[i].point[0]), parseFloat(points[i].point[1]))
                  let pointcolor = ''
                  let pointcolorDot = ''
                  if (points[i].stationCenter === '乌鲁木齐货运中心') {
                    pointcolor = that.stationColorAll.wlmq
                    pointcolorDot = 'dot1'
                  } else if (points[i].stationCenter === '哈密货运中心') {
                    pointcolor = that.stationColorAll.hm
                    pointcolorDot = 'dot2'
                  } else if (points[i].stationCenter === '喀什货运中心') {
                    pointcolor = that.stationColorAll.ks
                    pointcolorDot = 'dot4'
                  } else if (points[i].stationCenter === '奎屯货运中心') {
                    pointcolor = that.stationColorAll.kt
                    pointcolorDot = 'dot5'
                  } else if (points[i].stationCenter === '库尔勒货运中心') {
                    pointcolor = that.stationColorAll.kel
                    pointcolorDot = 'dot3'
                  }
                  let titleName = points[i].stationCenter
                  let mySquare = new SquareOverlay(point, 20, pointcolor, pointcolorDot, titleName)
                  map.addOverlay(mySquare)
                  mySquare.addEventListener('click', function (e) {
                    that.mapCenterPoint = [points[i].point[0], points[i].point[1]]
                    map.panTo(point)
                    map.zoomTo(8)
                    // that.selectStation({free: points[i].stationCenter})
                    that.dispatchSearchForm.free = points[i].stationCenter
                    that.dispatchSearchForm.mapZoom = map.getZoom()
                  })
                }
              }
            }
            addMarker(pointsData)
            map.addEventListener('click', function (e) {
              let modelShow = {
                infoDetailShowAll: false,
                infoDetailShow: false,
                screenGroupStation: false,
                screenGroupProduct: false,
                screenGroupvolume: false,
                screenGroupOther: false
              }
              that.oneStationInfoClose()
              that.modelShow = modelShow
              that.timeOutObj = false
            })
          }
        })
      },
      showStationInfo (item) {
        this.modelShow.infoDetailShow = false
        setTimeout(() => {
          this.modelShow.infoDetailShow = true
          this.modelShow.infoDetailShowAll = false
          this.currentRow = item
          let pointcolor = ''
          if (item.dataStation.free === '乌鲁木齐货运中心') {
            pointcolor = this.stationColorAll.wlmq
          } else if (item.dataStation.free === '哈密货运中心') {
            pointcolor = this.stationColorAll.hm
          } else if (item.dataStation.free === '喀什货运中心') {
            pointcolor = this.stationColorAll.ks
          } else if (item.dataStation.free === '奎屯货运中心') {
            pointcolor = this.stationColorAll.kt
          } else if (item.dataStation.free === '库尔勒货运中心') {
            pointcolor = this.stationColorAll.kel
          }
          this.stationColor.color = pointcolor
        }, 500)
      },
      onmousewheelFunction () {
        this.dispatchSearchForm.mapZoom = this.map.getZoom()
      }
    },
    mounted () {
      this.loadMapData()
      this.loadSelectList()
      this.setTimeoutGetfeightCount()
      hw.setFullHeightAllWith('stationMap', 35, (height) => {
        this.layoutHeight = height
      })
      this.$nextTick(function () {
      })
    },
    watch: {
      'dispatchSearchFormSX': {
        handler: function (oldVal, newVal) {
          let param = {
            keyPointZntx: +this.dispatchSearchFormSX.keyPointZntx,
            keyPointZnxygl: +this.dispatchSearchFormSX.keyPointZnxygl,
            keyPointFreightJqsd: +this.dispatchSearchFormSX.keyPointFreightJqsd,
            keyPointFreightBiz: +this.dispatchSearchFormSX.keyPointFreightBiz,
            keyPointPfrotocolFleet: +this.dispatchSearchFormSX.keyPointPfrotocolFleet,
            keyPointKxhl: +this.dispatchSearchFormSX.keyPointKxhl
          }
          if (param.keyPointZntx === 0 && param.keyPointZnxygl === 0 && param.keyPointFreightJqsd === 0 && param.keyPointFreightBiz === 0 && param.keyPointPfrotocolFleet === 0 && param.keyPointKxhl === 0) {
            this.selectStation({})
          } else {
            this.selectStation(param)
          }
        },
        deep: true
      },
      'dispatchSearchForm': {
        handler: function (oldVal, newVal) {
          if (newVal.mapZoom < 8) {
            if (newVal.free) {
              this.dispatchSearchForm.free = ''
            }
            this.selectStation(this.dispatchSearchForm)
          } else if (oldVal.mapZoom < 8 && newVal.mapZoom >= 8) {
            this.selectStation(this.dispatchSearchForm)
          } else {
            this.selectStation(this.dispatchSearchForm)
          }
        },
        deep: true
      },
      'dispatchSearchFormStation': {
        handler: function (oldVal, newVal) {
          this.selectStation(this.dispatchSearchFormStation)
        },
        deep: true
      }
    },
    computed: {},
    components: {autoSelect2}
  }
</script>
<style scoped>
  #stationMap * {
    -webkit-backface-visibility: hidden;
  }

  /* 地图标题 */
  .mapTitle {
    width: 360px;
    height: 70px;
    position: absolute;
    z-index: 600;
    left: 50%;
    top: 45px;
    margin-left: -180px;
    text-align: center;
  }

  .mapTitle h1 {
    font-size: 30px;
    letter-spacing: 0;
    font-weight: normal;
    text-align: center;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(113, 236, 255, 1)), to(rgba(0, 255, 229, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .mapTitle h4 {
    font-size: 12px;
    color: #00DCFF;
    letter-spacing: 5.3px;
    font-weight: normal;
    text-transform: uppercase;
  }

  .infoDetail {
    position: absolute;
    z-index: 1000;
    width: 420px;
    height: 100%;
    background: #173A58;
    box-shadow: 6px 0 10px 0 rgba(7, 35, 54, 0.74);
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
  }

  .infoDetail .infoDetailRow {
    margin: 10px 20px;
    padding: 5px 0;
    font-size: 14px;
    color: #FFFFFF;
    background-image: linear-gradient(90deg, rgba(27, 47, 67, 0.00) 0%, rgba(255, 255, 255, 0.20) 100%);
  }

  .infoDetail .infoDetailRowBackfround {
    margin: 10px 20px;
    padding: 5px 0;
    font-size: 14px;
    color: #FFFFFF;
  }

  /*滚动条样式*/
  .infoDetail::-webkit-scrollbar { /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
  }

  .infoDetail::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
  }

  .infoDetail::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.1);
  }

  /*搜索*/
  .searchInputGroup {
    position: absolute;
    left: 50px;
    top: 50px;
    z-index: 200;
    width: 270px;
    height: 45px;
    background: #173A58;
    border: 1px solid #225D92;
    padding: 5px;
  }

  .searchInputGroup .searchInput {
    width: 85%;
    float: left;
  }

  .searchInputGroup .searchIcon {
    width: 15%;
    float: left;
    height: 32px;
    line-height: 32px;
    text-align: center;
    padding: 4px 0;
    border-left: 1px solid #225D92;
    position: relative;
    z-index: 300;
  }

  /*筛选*/
  .screenGroup {
    position: absolute;
    right: 50px;
    top: 50px;
    z-index: 600;
    min-width: 355px;
    min-height: 45px;
  }

  .screenGroup .screenBar {
    width: 100%;
    height: 45px;
    background: #173A58;
    border: 1px solid #225D92;
  }

  .screenGroup .screenBar .screenBarItem {
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    cursor: pointer;
  }

  .screenGroup .screenBar .screenBarItem:hover {
    color: #5CA7FF;
  }

  .screenGroup .screenSelectInfo {
    margin-top: 10px;
    width: 100%;
    height: 200px;
    background: #173A58;
    padding: 10px;
    position: relative;
  }

  .screenSelectInfoIcon {
    position: absolute;
    right: 25px;
    top: -10px;
  }

  .screenGroup .screenSelectInfoStation {
    margin-top: 10px;
    width: 150px;
    min-height: 200px;
    background: #173A58;
    padding: 10px;
    position: relative;
  }

  .screenSelectInfoStationIcon {
    position: absolute;
    left: 70px;
    top: -10px;
  }

  .screenSelectInfoStation .infoDetailRow {
    padding: 5px 0;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
  }

  .screenSelectInfoStation .infoDetailRowBackfround {
    padding: 5px 0;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
  }

  .screenSelectInfoStation .infoDetailRow:hover, .screenSelectInfoStation .infoDetailRowBackfround:hover {
    color: #5CA7FF;
    background: #1E4667;
  }

  .screenGroup .screenSelectInfoProduct {
    margin-top: 10px;
    width: 150px;
    min-height: 200px;
    background: #173A58;
    padding: 10px;
    position: relative;
    margin-left: 100px;
  }

  .screenSelectInfoProductIcon {
    position: absolute;
    left: 170px;
    top: -10px;
  }

  .screenSelectInfoProduct .infoDetailRow {
    padding: 5px 0;
    font-size: 14px;
    color: #66b7f2;
    cursor: pointer;
  }

  .screenSelectInfoProduct .infoDetailRowBackfround {
    padding: 5px 0;
    font-size: 14px;
    color: #66b7f2;
    cursor: pointer;
  }

  .screenSelectInfoProduct .infoDetailRow:hover, .screenSelectInfoProduct .infoDetailRowBackfround:hover {
    color: #5CA7FF;
    background: #1E4667;
    cursor: pointer;
  }

  .screenGroup .screenSelectInfoVolume {
    margin-top: 10px;
    width: 150px;
    min-height: 200px;
    background: #173A58;
    padding: 10px;
    position: relative;
    margin-left: 180px;
  }

  .screenSelectInfoVolumeIcon {
    position: absolute;
    left: 170px;
    top: -10px;
  }

  .screenSelectInfoVolume .infoDetailRow {
    padding: 5px 0;
    font-size: 14px;
    color: #66b7f2;
    cursor: pointer;
  }

  .screenSelectInfoVolume .infoDetailRowBackfround {
    padding: 5px 0;
    font-size: 14px;
    color: #66b7f2;
    cursor: pointer;
  }

  .screenSelectInfoVolume .infoDetailRow:hover, .screenSelectInfoVolume .infoDetailRowBackfround:hover {
    color: #5CA7FF;
    background: #1E4667;
    cursor: pointer;
  }

  /*地图按钮*/
  .mapButton {
    position: absolute;
    bottom: 50px;
    right: 50px;
    z-index: 200;
    height: 33px;
    width: 35px;
    cursor: pointer;
  }

  .mapButton:hover {
    background-color: #1C4364;
  }

  .mapButton .previewMode {
    width: 35px;
    height: 32px;
    padding: 0 5px;
    border: 1px solid #225D92;
  }

  .mapButton .previewMode i {
    display: block;
    background: url("../../../../static/img/icon_preview.png") no-repeat;
    background-size: cover;
    width: 16px;
    height: 16px;
    margin: 8px auto;
  }

  /*货票统计*/
  .allElectronicBill {
    position: absolute;
    top: 150px;
    right: 50px;
    z-index: 200;
    width: 300px;
    height: 260px;
  }

  .allElectronicBill .allElectronicBillBackground {
    width: 300px;
    height: 290px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 300;
  }

  .allElectronicBill .allElectronicBillBackground .quadrilateral {
    width: 300px;
    height: 270px;
    background: #205078;
  }

  .allElectronicBill .allElectronicBillBackground .diamond {
    border-top: 20px solid #205078;
    border-left: 20px solid transparent;
    height: 0;
    width: 300px;
  }

  .allElectronicBill .allElectronicBillBackground .frameBorder {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 350;
    width: 30px;
    height: 30px;
    background: url("../../../../static/img/img_zdangle.png") no-repeat;
    background-size: cover;
  }

  .allElectronicBill .allElectronicBillDetail {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 450;
    margin: 10px;
    width: 280px;
    height: 240px;
  }

  .allElectronicBill .infoDetailRow {
    margin: 8px 0;
    padding: 5px;
    font-size: 14px;
    color: #FFFFFF;
    background-image: linear-gradient(90deg, rgba(27, 47, 67, 0.00) 0%, rgba(255, 255, 255, 0.20) 100%);
  }

  .allElectronicBill .infoDetailRowBackfround {
    margin: 8px 0;
    padding: 5px;
    font-size: 14px;
    color: #FFFFFF;
  }

  /*边框*/
  .borderTop {
    border-top-width: 1px;
    border-top-style: solid;
    border-image: -webkit-linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: -moz-linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
  }

  .borderLeft {
    border-left-width: 1px;
    border-left-style: solid;
    border-image: -webkit-linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: -moz-linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
  }

  .borderRight {
    border-right-width: 1px;
    border-right-style: solid;
    border-image: -webkit-linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: -moz-linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
  }

  .borderBottom {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-image: -webkit-linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: -moz-linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
  }

  /*单个站点弹出框*/
  .oneStationInfo {
    position: absolute;
    top: 150px;
    left: 50%;
    z-index: 200;
    margin-left: -285px;
    width: 570px;
    height: 240px;
  }

  .oneStationInfo .oneStationInfoDetail {
    width: 400px;
    height: 240px;
    position: absolute;
    left: 0;
    top: 0;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground {
    width: 400px;
    height: 240px;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondRight {
    width: 400px;
    height: 20px;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondRight .diamond {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 210;
    border-bottom: 20px solid #43657C;
    border-right: 20px solid transparent;
    height: 0;
    width: 400px;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondRight .quadrilateral {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 220;
    width: 380px;
    height: 20px;
    background-image: linear-gradient(-90deg, rgba(67, 101, 124, 1), rgba(32, 53, 70, 1));
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .quadrilateral {
    width: 400px;
    height: 200px;
    background-image: linear-gradient(-90deg, rgba(67, 101, 124, 1), rgba(32, 53, 70, 1));
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondLeft {
    width: 400px;
    height: 20px;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondLeft .diamond {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 210;
    border-top: 20px solid #203546;
    border-left: 20px solid transparent;
    height: 0;
    width: 400px;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondLeft .quadrilateral {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 220;
    width: 380px;
    height: 20px;
    background-image: linear-gradient(-90deg, rgba(67, 101, 124, 1), rgba(32, 53, 70, 1));
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .frameBorderTop {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 300;
    width: 30px;
    height: 30px;
    background: url("../../../../static/img/img_ydangle.png") no-repeat;
    background-size: cover;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .frameBorderBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 300;
    width: 30px;
    height: 30px;
    background: url("../../../../static/img/img_zdangle.png") no-repeat;
    background-size: cover;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailContent {
    width: 360px;
    height: 200px;
    margin: 10px 20px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 400;
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailContent .infoDetailRow {
    margin: 3px 0;
    padding: 2px 0;
    font-size: 14px;
    color: #FFFFFF;
    background-image: linear-gradient(90deg, rgba(27, 47, 67, 0.00) 0%, rgba(255, 255, 255, 0.20) 100%);
  }

  .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailContent .infoDetailRowBackfround {
    padding: 5px 0;
    font-size: 14px;
    color: #FFFFFF;
  }

  .oneStationInfo .oneStationInfoWaybill {
    width: 160px;
    height: 252px;
    position: absolute;
    right: 0;
    top: 0;
  }

  .oneStationInfo .oneStationInfoWaybill .selectButton {
    position: absolute;
    top: 30px;
    right: 22px;
    background: #083049;
    width: 25px;
    height: 50px;
    z-index: 500;
  }

  .oneStationInfo .oneStationInfoWaybill .title {
    width: 160px;
    height: 28px;
    position: relative;
  }

  .oneStationInfo .oneStationInfoWaybill .title .titleBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 28px;
  }

  .oneStationInfo .oneStationInfoWaybill .title .titleBackground .diamond {
    width: 160px;
    height: 14px;
  }

  .oneStationInfo .oneStationInfoWaybill .title .titleBackground .diamond .diamondLeft {
    position: absolute;
    left: 0;
    top: 0;
    border-bottom: 14px solid #4285C1;
    border-left: 14px solid transparent;
    height: 0;
    width: 14px;
  }

  .oneStationInfo .oneStationInfoWaybill .title .titleBackground .diamond .diamondLeft .diamondLeftTop {
    position: absolute;
    z-index: 210;
    top: 1px;
    left: -13px;
    border-bottom: 13px solid #083049;
    border-left: 13px solid transparent;
    height: 0;
    width: 13px;
  }

  .oneStationInfo .oneStationInfoWaybill .title .titleBackground .diamond .diamondRight {
    position: absolute;
    right: 0;
    top: 0;
    border-bottom: 14px solid #4285C1;
    border-right: 14px solid transparent;
    height: 0;
    width: 14px;
  }

  .oneStationInfo .oneStationInfoWaybill .title .titleBackground .diamond .diamondRight .diamondRightTop {
    position: absolute;
    z-index: 210;
    top: 1px;
    left: 0;
    border-bottom: 13px solid #083049;
    border-right: 13px solid transparent;
    height: 0;
    width: 13px;
  }

  .oneStationInfo .oneStationInfoWaybill .title .titleBackground .diamond .diamondCenter {
    position: absolute;
    top: 0;
    left: 13px;
    width: 133px;
    height: 14px;
    background: #083049;
    border-top: 1px solid #4285C1;
  }

  .oneStationInfo .oneStationInfoWaybill .title .titleBackground .quadrilateral {
    width: 160px;
    height: 14px;
    background: #083049;
    border-left: 1px solid #4285C1;
    border-right: 1px solid #4285C1;
  }

  .oneStationInfo .oneStationInfoWaybill .titleContent {
    position: absolute;
    z-index: 300;
    top: 0;
    left: 0;
    width: 160px;
    height: 28px;
  }

  .oneStationInfo .oneStationInfoWaybill .titleCount {
    width: 160px;
    height: 44px;
    border: 1px solid #4285C1;
    border-top: none;
    background-image: linear-gradient(90deg, rgba(21, 63, 91, 1), rgba(26, 58, 83, 1));
    box-shadow: 0 0 10px 0 rgba(0, 98, 212, 0.37);
  }

  .oneStationInfo .oneStationInfoWaybill .wayBillList {
    height: 180px;
    width: 160px;
    padding: 0 10px;
    background-image: linear-gradient(-180deg, #22445D 89%, #08304A 94%);
    border-left-width: 1px;
    border-right-width: 1px;
    border-style: solid;
    border-image: -webkit-linear-gradient(180deg, rgba(66, 133, 193, 1), rgba(8, 48, 74, 1)) 1 1;
    border-image: -moz-linear-gradient(180deg, rgba(66, 133, 193, 1), rgba(8, 48, 74, 1)) 1 1;
    border-image: linear-gradient(180deg, rgba(66, 133, 193, 1), rgba(8, 48, 74, 1)) 1 1;
    border-top: none;
    border-bottom: none;
    overflow: hidden;
  }

  .oneStationInfo .oneStationInfoWaybill .wayBillList .wayBillListRow {
    width: 100%;
    height: auto;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(142, 233, 255, 0.30);
  }

  .bottomShadow {
    position: absolute;
    bottom: 0;
    height: 90px;
    width: 160px;
    z-index: 300;
    background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0), rgba(8, 48, 74, 1));
    background-image: -moz-linear-gradient(top, hsla(0, 0%, 100%, 0), rgba(8, 48, 74, 1));
    background-image: -o-linear-gradient(top, hsla(0, 0%, 100%, 0), rgba(8, 48, 74, 1));
    background-image: linear-gradient(top, hsla(0, 0%, 100%, 0), rgba(8, 48, 74, 1));
  }

  #stationMap .oneStationInfoDetailBackground:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: inherit;
    -webkit-filter: blur(2px); /* Chrome, Opera */
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=false); /* IE6~IE9 */
    z-index: 2;
  }

  .screenSelectInfo .selectItem {
    background: #275174;
    border: 1px solid #4A90E2;
    padding: 5px 0;
    color: #4A90E2;
    font-size: 14px;
    text-align: center;
  }

  .screenSelectInfo .unselectItem {
    background: #275174;
    border: 1px solid #275174;
    padding: 5px 0;
    color: #fff;
    font-size: 14px;
    text-align: center;
  }

  .screenSelectInfo .unselectItem .ivu-icon {
    color: #326A92;
  }

  #stationMap .ivu-select-dropdown::-webkit-scrollbar { /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
  }

  #stationMap .ivu-select-dropdown::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
  }

  #stationMap .ivu-select-dropdown::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.1);
  }
</style>
<style>
  #stationMap .searchInputGroup .searchInput .ivu-select-input {
    padding: 0 8px;
    color: #fff;
    border: none;
  }

  #stationMap .ivu-select-visible .ivu-select-selection {
    border: none;
    box-shadow: none;
  }

  #stationMap .ivu-select:focus .ivu-select-selection {
    border: none;
    box-shadow: none;
  }

  #stationMap .ivu-select-selection {
    border: none;
  }

  #stationMap .searchInputGroup .searchInput .ivu-select-single .ivu-select-selection {
    background-color: transparent;
  }

  #stationMap .ivu-select-selection {
    width: 80%;
  }

  #stationMap .ivu-select-arrow {
    color: #306A87;
  }

  #stationMap .ivu-select-dropdown {
    top: 38px !important;
    left: -1px !important;
    border-radius: 0;
    border: 1px solid #225D92;
    background: #173A58;
    padding: 0;
  }

  #stationMap .ivu-select-item {
    color: #B8D9FF;
  }

  #stationMap .ivu-select-item:hover {
    color: #fff;
    background: #1E4667;
  }

  #stationMap .ivu-select-item-selected, #stationMap .ivu-select-item-selected:hover {
    color: #fff;
    background: #1E4667;
  }

  #stationMap .ivu-btn-primary {
    color: #66B7F2;
    background-color: #225D92;
    border: 2px solid #225D92;
  }

  #stationMap .buttonGroupActive {
    background-color: #173A58;
    border: 2px solid #225D92;
  }

  .addButton, .minusButton {
    width: 33px;
  }

  .addButton:hover {
    background-color: #1C4364;
  }

  .minusButton:hover {
    background-color: #1C4364;
    border-bottom: 1px solid #225D92;
  }

  .dot1:before {
    content: ' ';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background-color: #44C0FF;
    border-radius: 50%;
  }

  .dot1:after {
    content: ' ';
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    background-color: #44C0FF;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
    -webkit-backface-visibility: hidden;
    -webkit-animation-name: 'ripple'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s; /*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s; /*动画延迟时间*/
    -webkit-animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal; /*定义动画方式*/
  }

  .dot2:before {
    content: ' ';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background-color: #FB943A;
    border-radius: 50%;
  }

  .dot2:after {
    content: ' ';
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    background-color: #FB943A;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
    -webkit-backface-visibility: hidden;
    -webkit-animation-name: 'ripple'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s; /*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s; /*动画延迟时间*/
    -webkit-animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal; /*定义动画方式*/
  }

  .dot3:before {
    content: ' ';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background-color: #A1BF50;
    border-radius: 50%;
  }

  .dot3:after {
    content: ' ';
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    background-color: #A1BF50;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
    -webkit-backface-visibility: hidden;
    -webkit-animation-name: 'ripple'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s; /*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s; /*动画延迟时间*/
    -webkit-animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal; /*定义动画方式*/
  }

  .dot4:before {
    content: ' ';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background-color: #DD2037;
    border-radius: 50%;
  }

  .dot4:after {
    content: ' ';
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    background-color: #DD2037;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
    -webkit-backface-visibility: hidden;
    -webkit-animation-name: 'ripple'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s; /*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s; /*动画延迟时间*/
    -webkit-animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal; /*定义动画方式*/
  }

  .dot5:before {
    content: ' ';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background-color: #24C4A0;
    border-radius: 50%;
  }

  .dot5:after {
    content: ' ';
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    background-color: #24C4A0;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
    -webkit-backface-visibility: hidden;
    -webkit-animation-name: 'ripple'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s; /*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s; /*动画延迟时间*/
    -webkit-animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal; /*定义动画方式*/
  }

  @keyframes ripple {
    0% {
      left: 5px;
      top: 5px;
      opcity: 1;
      width: 0;
      height: 0;
    }
    100% {
      left: -15px;
      top: -15px;
      opacity: 0;
      width: 50px;
      height: 50px;
    }
  }
</style>
